<template>
  <div class="item">
    <div class="img">
      <img :src="img" alt="" width="100%" />
    </div>
    <div class="title">{{ title }}</div>
    <div class="price">￥{{ price }}</div>
    <button class="btn">立即购买</button>
  </div>
</template>

<script>
export default {
  props: ["img", "title", "price"],
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  text-align: center;
  .img {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    color: #1d1d1d;
    font-size: 17px;
  }
  .price {
    margin: 16px 0;
    font-size: 17px;
    color: rgb(255, 102, 55);
    font-weight: 700;
  }
  .btn {
    background-color: rgb(255, 102, 55);
    color: #fff;
    font-size: 14px;
    padding: 6px 18px;
    border: 0;
    border-radius: 3px;
  }
}
</style>
